<!--  -->
<template>
  <div :style="{backgroundImage:`url(${img})`}" class='content'>
    <div :style="{backgroundImage:`url(${img1})`}" class="content_input">
      <!-- <el-autocomplete class="query" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="可输入资产、编号、承租人、房屋性质" @select="handleSelect">
        <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick">
        </i>
      </el-autocomplete> -->
      <el-input v-model="state" class="query" @change="handleSelect" suffix-icon="el-icon-search" placeholder="可输入资产、编号、承租人、房屋性质"></el-input>
    </div>
    <div class="content_table">
      <vxe-grid v-show="show" :cell-style="cellStyle" stripe highlight-hover-row border size="mini" resizable :loading="loading" :columns="tableColumn" :data="tableData" @cell-click="cellClickEvent" :toolbar="tableToolbar"></vxe-grid>
      <pagination v-show="tablePage.total>0" :total="tablePage.total" :page.sync="tablePage.page" :limit.sync="tablePage.pageSize" @pagination="getPage" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TableDialog from "@/views/dashboard/components/TableDialog";
import Pagination from "@/components/Pagination";
import { getTableColumn } from "@/utils/baseData";
import request from "@/utils/request2";
import { getFuzzyQuery } from "@/api/map";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Pagination },
  data() {
    //这里存放数据
    return {
      state: "",
      img: require("../../assets/background.png"),
      img1: require("../../assets/search-background.png"),
      tableData: [],
      tableColumn: [],
      tablePage: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      show: false,
      tableToolbar: {
        refresh: true,
        setting: true
      },
      loading: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelect(value) {
      this.loading = true;
      this.tablePage.common = value;
      this.show = true;
      getFuzzyQuery(this.tablePage).then(res => {
        this.loading = false;
        this.tableData = res.data;
        this.tablePage.total = res.allCount;
        this.tableColumn = getTableColumn("asset2");
      });
    },
    getPage({ page, limit }) {
      this.tablePage.page = page;
      this.tablePage.pageSize = limit;
      this.tablePage.common = this.state;
      getFuzzyQuery(this.tablePage).then(res => {
        this.loading = false;
        this.tableData = res.data;
        this.tablePage.total = res.allCount;
        this.tableColumn = getTableColumn("asset2");
      });
    },
    cellClickEvent(e) {
      this.$router.push({
        name: "detail",
        query: { roomGuid: e.row.GUID }
      });
    },
    cellStyle({ row, rowIndex, column, columnIndex }) {
      if (column.property === "Num") {
        if (row.Num.includes(this.state)) {
          return {
            backgroundColor: "#2db7f5"
          };
        }
      } else if (column.property === "Address") {
        if (row.Address.includes(this.state)) {
          return {
            backgroundColor: "#2db7f5"
          };
        }
      } else if (column.property === "Charter") {
        if (row.Charter.includes(this.state)) {
          return {
            backgroundColor: "#2db7f5"
          };
        }
      } else {
        if (this.state === "") {
          return {
            backgroundColor: "rgb(232, 234, 236)"
          };
        }
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
/deep/ .app-main {
  overflow: auto;
}
/deep/ tr:hover {
  cursor: pointer;
}
/deep/ th .vxe-cell {
  text-align: center;
}
.query {
  cursor: pointer;
}
.content {
  width: 100%;
  height: calc(100vh - 50px);
  background-size: cover;
  background-position: center;
  display: block;
  text-align: center;
  position: absolute;
  .content_input {
    margin: 50px 200px 0px 200px;
    height: 8%;
    text-align: center;
    background-size: cover;
    background-position: center;
  }
  .query {
    top: 28%;
    width: 450px;
    margin-right: 110px;
  }
}
</style>